import { getValueByKey } from 'csui'
import type { CsFormItemComponentProps, CsFormPropsItem, InputProps } from 'csui'
import { verifyIdCardChina, verifyPhone } from '/@/utils/tools-validate'

type UseElInputProps<
  D extends Record<string, any>,
  P extends keyof Readonly<D>
> = UseFormItemProps<InputProps, D, P>
/**
 * el-input
 * @param prop item.prop
 * @param label item.label·
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInput<T extends Record<string, any>, P extends keyof T>(
  prop: P,
  label: string,
  props: UseElInputProps<T, P> = {}
): FormItemProps<T, P> {
  if (!props.props) {
    props.props = {}
  }
  // 有字数限制, 默认显示长度
  if (props.props.maxlength) {
    props.props.showWordLimit = true
  }
  // 没特别formatter, 设置清空左则空格
  if (!props.props.formatter) {
    props.props.formatter = (value: string) => value.trimStart()
  }
  return {
    ...props,
    prop,
    label,
    component: 'el-input'
  }
}

/**
 * 搜索人员的el-input
 * @param prop item.prop
 * @param label item.label··
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInputEmpNameAndId<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseElInputProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.placeholder = '请输入姓名或工号'

  return useElInput(prop, label, props)
}

/**
 * 搜索人员的el-input
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInputTextArea<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseElInputProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.type = 'textarea'
  props.props.maxlength = props.props.maxlength || 500
  props.props.autosize = { minRows: 2, maxRows: 6 }

  return useElInput(prop, label, props)
}

/**
 * @description 中国大陆18位身份证号码校验
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInputIdCard<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseElInputProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.rules = [
    {
      validator: (rule: any, value: string, callback: any) => {
        if (value) {
          if (value.length === 18 && verifyIdCardChina(value)) {
            callback()
          } else {
            callback('请输入正确的身份证号码')
          }
        } else {
          callback('请输入身份证号码')
        }
      }
    }
  ]
  props.props.maxlength = 18
  props.props.placeholder = '请输入身份证号码'
  return useElInput(prop, label, props)
}

/**
 * @description 邮箱校验
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInputEmail<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseElInputProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.rules = [
    {
      validator(rules, value: string, callback) {
        const reg_qq_email = /^(?!.*@qq\.com).*$/
        const reg_email = /^[\w%+.-]+@[\d.A-Za-z-]+\.[A-Za-z]{2,}$/
        if (!value || value.length === 0) {
          if (props.required) {
            callback(new Error(`${label}必填项`))
          } else {
            callback()
          }
          return
        }
        const valueStr = value.toLocaleLowerCase()
        switch (true) {
          case !reg_email.test(valueStr): {
            callback(new Error(`请输入正确的${label}`))
            break
          }
          case !reg_qq_email.test(valueStr): {
            callback(new Error('不支持QQ邮箱'))
            break
          }
          default: {
            callback()
          }
        }
      }
    }
  ]
  if (!props.props.maxlength) {
    props.props.maxlength = 30
  }
  props.props.placeholder = `请输入${label}`
  return useElInput(prop, label, props)
}

/**
 * @description 手机号码校验
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useElInputPhone<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseElInputProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.rules = [
    {
      validator(rule, value, callback) {
        switch (true) {
          case !value || value.length === 0: {
            callback(new Error('手机号码为必填项'))
            break
          }
          case !verifyPhone(value): {
            callback(new Error('请输入正确的手机号码'))
            break
          }
          default: {
            callback()
          }
        }
      }
    }
  ]
  props.props.maxlength = 11
  props.props.placeholder = `请输入${label}`
  return useElInput(prop, label, props)
}

/**
 * @description 根据表单数据自动带出指定key的值（只读）
 * @param prop 获取自动带出值的key
 * @param label 表单label
 * @param placeholder 输入框占位符
 * @returns form-item-data
 */
export function useAutoInput<T extends Record<string, any>>(
  prop: Parameters<typeof getValueByKey>[1],
  label: string,
  placeholder = '自动带出'
): CsFormPropsItem<T> {
  return {
    prop: 'OUT_INPUT_PROP',
    label,
    readonly: true,
    component: (props: CsFormItemComponentProps) => {
      return (
        <el-input
          readonly
          placeholder={placeholder}
          modelValue={getValueByKey(props['form-data'], prop)}
        />
      )
    }
  }
}
